<!-- 结算 -->
<template>
	<view class="content">
		<!-- #ifdef APP-PLUS -->
		<Header title="结算" :isShowRight="false" arrowColor="#252A36" textColor="#111111" @back="back"></Header>
		<!-- #endif -->
		<view class="matter">
			<view class="original" v-if="user.vipEndDay < 1">
				<view class="courseNum" v-if="type == 1">共{{ seriesList.length }}个付费课程</view>
				<view class="centerbox">
					<view class="box1">
						<view>本课程原价：</view>
						<text>￥</text>
						<view class="price">{{ type == 1 ? course.courseTotalPrice : chapter.coursePrice }}</view>
					</view>
					<view class="box2">
						<view>会员价：</view>
						<text>￥</text>
						<view class="price">{{ type == 1 ? course.coursePrice : chapter.coursePriceZk }}</view>
					</view>
					<text>您还不是会员，成为会员后可尊享会员价</text>
					<view class="join" @click="buyVip">立即加入会员</view>
				</view>
			</view>
			<!-- 会员状态 -->
			<view class="members" v-else>
				<view class="courseNum" v-if="type == 1">共{{ seriesList.length }}个付费课程</view>
				<text>会员价</text>
				<view class="price">
					<view class="box1">
						<text>￥</text>
						<view>{{ type == 1 ? course.coursePrice : chapter.coursePriceZk }}</view>
					</view>
					<view class="box2">
						<text>￥</text>
						<view>{{ type == 1 ? course.courseTotalPrice : chapter.coursePrice }}</view>
					</view>
				</view>
				<view>您已是尊贵的会员，可享会员价</view>
			</view>

			<!-- 支付方式 -->
			<view class="payWay">
				<view class="title">支付方式</view>
				<view class="paywayBox">
					<view class="ItemBox" v-for="(item, index) in payList" :key="index" @click="payWay = item.id">
						<view class="icon">
							<image :src="item.icon"></image>
							<text>{{ item.way }}</text>
						</view>
						<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/checked.png"
							v-if="payWay == item.id"></image>
						<image v-else src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/nocheck.png"></image>
					</view>
				</view>
				<!-- 系列课程 -->
				<view class="title">系列课程</view>
				<view class="courseBox">
					<view :class="['allItem', type == 2 ? 'act' : '']">
						<view class="item" v-for="(cell, idx) in seriesList" :key="idx">
							<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/book.png" class="book"></image>
							<view class="titles">{{ cell.resourceName }}</view>
							<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/free.png"
								v-if="cell.coursePrice == 0"></image>
							<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/unlock.png"
								v-if="cell.isBuy == 1"></image>
							<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/lock.png" v-else></image>
						</view>
					</view>
					<block v-if="type == 2">
						<view class="text">共{{ seriesList.length }}个需要付费的课程</view>
						<view class="price">
							<view class="box">
								<text>打包价：</text>
								<view class="price1">
									<text>￥</text>
									<view>{{ course.courseTotalPrice }}</view>
								</view>
							</view>
							<view class="box">
								<text>会员打包价：</text>
								<view class="price1">
									<text>￥</text>
									<view>{{ course.coursePrice }}</view>
								</view>
							</view>
						</view>
					</block>
				</view>
			</view>
		</view>

		<!-- 底部按钮 -->
		<!-- 本系列购买 -->
		<view class="bottomBtn1" v-if="type == 1">
			<view class="centerBtn" @click="buySeries">确认购买</view>
		</view>
		<!-- 单独购买 -->
		<view class="bottomBtn" v-else>
			<view class="left" @click="buySeries">购买系列全部课程</view>
			<view class="right" @click="buyChapter">单独购买本课程</view>
		</view>

		<!-- 购买成功弹窗 -->
		<success-popup :show="popupShow" text="购买成功"></success-popup>
	</view>
</template>

<script>
	import {
		getUserData,
		courseDetail,
		seriesDetail,
		resourceList,
		createOrder,
		aliPay,
		wxPay
	} from '@/apis/apis.js';
	import Header from '@/components/c_header.vue';
	import successPopup from '@/components/successPopup.vue';
	export default {
		components: {
			Header,
			successPopup
		},
		data() {
			return {
				user: {},
				type: null, // 路由传参 1 系列购买 2 单独购买
				courseId: '', // 系列id
				chapterId: '', // 课程章节id
				course: {}, // 系列详情
				chapter: {}, // 课程详情
				seriesList: [],
				popupShow: false, //购买成功弹窗
				show: false,
				show1: false,
				show2: false,
				payWay: 1, // 0 微信 1 支付宝
				payList: [{
						id: 0,
						way: '微信支付',
						icon: 'https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/wx.png'
					},
					// #ifdef APP-PLUS
					{
						id: 1,
						way: '支付宝',
						icon: 'https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/alipay.png'
					}
					// #endif
				]
			};
		},
		onLoad(options) {
			console.log(options);
			// type 1 系列购买 2 单独购买
			this.type = options.type ? options.type : null;
			this.courseId = options.courseId ? options.courseId : '';
			this.chapterId = options.chapterId ? options.chapterId : '';
			// #ifdef MP-WEIXIN
			this.payWay = 0;
			// #endif
		},
		onShow() {
			this.init();
			if (this.chapterId) {
				this.getChapter();
			}
		},
		methods: {
			init() {
				this.getUserDataApi();
				this.getSeries();
				this.getSeriesList();
			},
			getUserDataApi() {
				getUserData().then(res => {
					// console.log('用户信息',res)
					this.user = res.data;
				});
			},
			// 获取章节详情
			getChapter() {
				courseDetail(this.chapterId).then(res => {
					console.log('章节详情', res);
					this.chapter = res.data;
				});
			},
			// 系列
			getSeries() {
				seriesDetail(this.courseId).then(res => {
					console.log('系列详情', res);
					this.course = res.data;
				});
			},
			// 课程章节
			getSeriesList() {
				resourceList({
					courseId: this.courseId,
					type: 1
				}).then(res => {
					console.log('章节列表', res);
					this.seriesList = res.data;
				});
			},
			//购买系列
			buySeries() {
				let that = this;
				const vip = this.user.vipEndDay;
				const plat = uni.getSystemInfoSync().platform;
				let data = {
					courseName: this.course.courseName,
					isMember: vip > 0 ? 1 : 0, // 会员
					orderSource: plat == 'ios' ? 2 : 1,
					orderType: 1, // 1系列 2课程 3会员
					payMoney: vip > 0 ? this.course.coursePrice : this.course.courseTotalPrice, //实付金额
					totalMoney: vip > 0 ? this.course.coursePrice : this.course.courseTotalPrice, // 总金额
					spellFlag: 0, // 拼单 0 否 1 是
					courseId: this.course.id,
					coverImg: this.course.courseForeachimg
				};
				console.log(data);
				// this.createOrderApi(data)
				createOrder(data).then(res => {
					console.log('订单信息', res);
					// 调支付
					if (res.code == 200) {
						that.payMent(data, res.data);
					}
				});
			},
			// 购买单独课
			buyChapter() {
				let that = this;
				const vip = this.user.vipEndDay;
				const plat = uni.getSystemInfoSync().platform;
				let data = {
					courseName: this.chapter.resourceName,
					isMember: vip > 0 ? 1 : 0, // 会员
					orderSource: plat == 'ios' ? 2 : 1,
					orderType: 2, // 1系列 2课程 3会员
					payMoney: vip > 0 ? this.chapter.coursePriceZk : this.chapter.coursePrice, //实付金额
					totalMoney: vip > 0 ? this.chapter.coursePriceZk : this.chapter.coursePrice, // 总金额
					spellFlag: 0, //拼单
					coverImg: this.chapter.coverImg,
					resourceIds: this.chapter.id
				};
				// console.log(data)
				createOrder(data).then(res => {
					console.log('订单信息', res);
					// 调支付
					if (res.code == 200) {
						that.payMent(data, res.data);
					}
				});
			},
			// 创建订单
			async createOrderApi(data) {
				const res = await createOrder(data);
				console.log('订单信息', res);
				// 调支付
				if (res.code == 200) {
					this.payMent(data, res.data);
				}
				// this.popupShow = true
			},
			// 支付
			async payMent(info, sn) {
				if (this.payWay == 0) {
					//微信支付
					const pay = await wxPay({
						payMoney: info.payMoney,
						payType: 1, //支付类型(1：订单支付)
						// #ifdef APP-PLUS
						optType: 2, //	客户端类型(1：小程序, 2:APP )
						// #endif
						// #ifdef MP-WEIXIN
						optType: 1, //	客户端类型(1：小程序, 2:APP )
						// #endif
						description: `购买${info.courseName}`, //	付款内容
						orderNo: sn //订单号
					});
					console.log(pay, '获取支付');
					if (pay.code === 200) {
						// #ifdef APP-PLUS
						uni.requestPayment({
							provider: 'wxpay',
							orderInfo: pay.data,
							success: result => {
								console.log('微信支付结果', result);
								// 支付成功
								this.showBuy = false;
								this.showSuccess = true;
								setTimeout(() => {
									this.showSuccess = false;
									this.userData();
									this.init();
								}, 1500);
							},
							fail: err => {
								console.log('失败', err);
							},
							complete: () => {
								this.showBuy = false;
							}
						});
						// #endif
						// #ifdef MP-WEIXIN
						uni.requestPayment({
							provider: 'wxpay',
							orderInfo: `购买${info.courseName}`,
							appId: pay.data.appId,
							nonceStr: pay.data.nonceStr,
							package: pay.data.package,
							paySign: pay.data.paySign,
							signType: pay.data.signType,
							timeStamp: pay.data.timeStamp,
							success: result => {
								console.log('微信支付结果', result);
								// 支付成功
								this.showBuy = false;
								this.showSuccess = true;
								setTimeout(() => {
									this.showSuccess = false;
									this.userData();
									this.init();
								}, 1500);
							},
							fail: err => {
								console.log('失败', err);
							},
							complete: () => {
								this.showBuy = false;
							}
						});
						// #endif
						
						
						// uni.requestPayment({
						// 	provider: 'wxpay',
						// 	orderInfo: pay.data,
						// 	success: result => {
						// 		console.log('微信支付结果', result);
						// 		// 支付成功
						// 		this.popupShow = true;
						// 		setTimeout(() => {
						// 			this.popupShow = false;
						// 			this.goCourseDetail();
						// 		}, 1500);
						// 	},
						// 	fail: err => {
						// 		console.log('失败', err);
						// 	}
						// });
					} else {
						console.log(res);
						uni.$u.toast('微信支付拉取失败');
					}
				} else if (this.payWay == 1) {
					//支付宝支付
					const pay = await aliPay({
						orderNo: sn,
						payMoney: info.payMoney.toFixed(2),
						payType: 1,
						description: `购买${info.courseName}`
					});
					console.log(pay, '支付宝拉取');
					if (pay.code == 200) {
						uni.requestPayment({
							provider: 'alipay',
							orderInfo: pay.data,
							success: result => {
								console.log('支付宝支付结果', result);
								// 支付成功
								this.popupShow = true;
								setTimeout(() => {
									this.popupShow = false;
									this.goCourseDetail();
								}, 1500);
							},
							fail: err => {
								console.log('失败', err);
							}
						});
					} else {
						uni.$u.toast('支付宝支付拉取失败');
					}
				}
			},
			back() {
				uni.navigateBack();
			},
			//购买成功后跳转课程详情页面
			goCourseDetail() {
				this.back();
			},
			buyVip() {
				// 去购买会员
				uni.navigateTo({
					url: '/pages/mine/views/vip/buyVip'
				});
			}
		}
	};
</script>

<style scoped lang="scss">
	.content {
		width: 100%;

		.popupText {
			font-size: 32rpx;
			font-family: Source Han Sans CN;
			font-weight: 500;
			color: #434343;
			padding-top: 20rpx;
		}

		.bottomBtn {
			width: 100%;
			height: 120rpx;
			border-radius: 40rpx 40rpx 0 0;
			display: flex;
			background: #fff;
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 9999;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: bold;

			.left {
				width: 50.4%;
				padding: 46rpx 0 0 70rpx;
				border-radius: 40rpx 0 0 0;
				color: #194FC9;
			}

			.right {
				width: 49.6%;
				border-radius: 0 40rpx 0 0;
				background: #194FC9;
				padding: 46rpx 0 0 84rpx;
				color: #ffffff;
			}
		}

		.bottomBtn1 {
			width: 100%;
			height: 120rpx;
			padding-bottom: env(safe-area-inset-bottom);
			border-radius: 40rpx 40rpx 0 0;
			background: #fff;
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 9999;
			font-family: PingFang SC;
			font-weight: bold;
			display: flex;
			justify-content: center;
			align-items: center;

			.centerBtn {
				width: 410rpx;
				height: 80rpx;
				background: #194FC9;
				border-radius: 40rpx;
				text-align: center;
				line-height: 80rpx;
				font-size: 30rpx;
				color: #fff;
			}
		}

		.matter {
			background: #f8f8f8;
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			top: 144rpx;
			overflow: hidden;
			overflow-y: visible;
			padding: 0 0 calc(env(safe-area-inset-bottom) + 160rpx) 0;

			.original {
				background: #fff;
				padding: 40rpx 0 56rpx 0;

				.courseNum {
					width: 206rpx;
					height: 50rpx;
					background: rgba(82, 196, 255, 0.12);
					border-radius: 10rpx;
					font-size: 26rpx;
					font-family: Source Han Sans CN;
					color: #194FC9;
					text-align: center;
					line-height: 50rpx;
					margin-left: 32rpx;
				}

				.centerbox {
					height: 280rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					align-items: center;

					.box1 {
						display: flex;
						align-items: baseline;
						font-size: 26rpx;
						font-family: Source Han Sans CN;
						color: #282828;

						.price {
							font-family: PingFang SC;
							font-weight: bold;
							color: #ff8809;
							font-size: 32rpx;
						}

						&>text {
							color: #ff8809;
						}
					}

					.box2 {
						display: flex;
						align-items: baseline;
						font-size: 30rpx;
						font-family: Source Han Sans CN;
						font-weight: 500;
						color: #282828;

						.price {
							font-family: PingFang SC;
							font-weight: bold;
							color: #ff8809;
							font-size: 50rpx;
						}

						&>text {
							color: #ff8809;
						}
					}

					&>text {
						font-size: 28rpx;
						font-family: Source Han Sans CN;
						color: #333333;
					}

					.join {
						width: 420rpx;
						height: 80rpx;
						background: #194FC9;
						box-shadow: 0 12rpx 16rpx 0 rgba(82, 163, 255, 0.3);
						border-radius: 40rpx;
						text-align: center;
						line-height: 80rpx;
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #ffffff;
					}
				}
			}

			.members {
				background: #fff;
				font-size: 14px;
				font-family: Source Han Sans CN;
				color: #333333;
				padding: 40rpx 0 74rpx 0;
				display: flex;
				flex-direction: column;
				align-items: center;

				.courseNum {
					width: 206rpx;
					height: 50rpx;
					background: rgba(82, 196, 255, 0.12);
					border-radius: 10rpx;
					font-size: 26rpx;
					font-family: Source Han Sans CN;
					color: #194FC9;
					text-align: center;
					line-height: 50rpx;
					// margin: 100rpx 200rpx 0 0;
					position: absolute;
					top: 22rpx;
					left: 32rpx;
				}

				.price {
					// padding: 20rpx 0 20rpx 0;
					display: flex;
					align-items: baseline;

					.box1 {
						display: flex;
						align-items: baseline;
						vertical-align: text-top;
						font-weight: bold;
						color: #ff8809;
						font-size: 80rpx;

						&>text {
							font-size: 50rpx;
						}
					}

					.box2 {
						display: flex;
						align-items: baseline;
						font-size: 30rpx;
						text-decoration: line-through;
						color: #c3c3c3;
					}
				}
			}

			.payWay {
				width: 92%;
				margin: 0 auto;

				.title {
					font-size: 30rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #333333;
					padding: 40rpx 0 36rpx 0;
				}

				.paywayBox {
					background: #fff;
					// height: 254rpx;
					border-radius: 20rpx;

					.ItemBox {
						height: 125rpx;
						line-height: 125rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 0 30rpx;
						font-size: 30rpx;
						font-family: Source Han Sans CN;
						font-weight: 500;
						color: #151515;
						border-bottom: 2rpx solid rgba(39, 39, 39, 0.1);

						&:last-child {
							border: 0;
						}

						.icon {
							display: flex;
							align-items: center;

							&>image {
								width: 38rpx;
								height: 38rpx;
								margin-right: 24rpx;
							}
						}

						&>image {
							width: 34rpx;
							height: 34rpx;
						}
					}
				}

				.courseBox {
					padding: 20rpx 0;
					background: #ffffff;
					box-shadow: 0px 3px 13px 0px rgba(127, 129, 133, 0.1);
					border-radius: 20rpx;

					.act {
						border-bottom: 2rpx solid rgba(39, 39, 39, 0.1);
					}

					.allItem {
						padding: 16rpx 0 14rpx 0;

						.item {
							display: flex;
							align-items: center;
							justify-content: space-between;
							padding: 11rpx 0;
							padding: 22rpx 32rpx 22rpx 26rpx;

							.titles {
								width: 502rpx;
								font-size: 30rpx;
								font-family: Source Han Sans CN;
								color: #434343;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}

							.book {
								width: 28rpx;
								height: 24rpx;
							}

							&>image {
								width: 30rpx;
								height: 30rpx;
							}
						}
					}

					.text {
						font-size: 26rpx;
						font-family: Source Han Sans CN;
						color: #8e8e8e;
						padding: 20rpx 0 20rpx 30rpx;
					}

					.price {
						display: flex;
						align-items: baseline;
						padding: 0 0 0 30rpx;

						.box {
							display: flex;
							// align-items: center;
							font-weight: bold;
							color: #ff8809;

							.price1 {
								font-size: 30rpx;
								display: flex;
								align-items: baseline;
								font-family: PingFang SC;
								margin-right: 80rpx;

								&>text {
									font-size: 28rpx;
								}
							}

							&>text {
								font-family: Source Han Sans CN;
								color: #282828;
								font-size: 14px;
							}
						}
					}
				}
			}
		}
	}
</style>
